<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
</head>
<body>
<div id="app">
    <counter :num="count" @incr="add" @decr="reduce"></counter>
</div>

<script src="node_modules/vue/dist/vue.js"></script>

<script>
    //局部组件
    const counter = {
        template:`
            <div>
                <button @click="handleAdd">+</button>
                <button @click="handleReduce">-</button>
                <h1>
                    Num:{{num}}
                </h1>
            </div>`,
        props:['num'],
        methods:{
            handleAdd(){
                this.$emit('incr');
            },
            handleReduce(){
                this.$emit('decr');
            },
        }
    };
    const app = new Vue({
        el:"#app", //element,vue作用的标签
        data:{
            count: 0,
        },
        components:{
            counter
        },
        methods:{
            add(){
                this.count++;
            },
            reduce(){
                this.count--;
            }
        }
    });
</script>
</body>
</html>